<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>异步请求</title>
</head>
<body>
    响应结果为：<span id="result"></span>

    <p/>
    <button id="btn" type="button" onclick="async()">发送异步请求</button>

    <p/>
    <a href="sync.do">同步请求</a><p/>

    <a href="#">其它请求一</a><p/>
    <a href="#">其它请求二</a><p/>
    <a href="#">其它请求三</a><p/>



    <script>
        function async() {
            // 第一：实例化 XMLHTTPRequest 对象
            var req = new XMLHttpRequest();


            // 第二：初始化HTTP请求参数 - 调用 open 方法
            req.open("post","hello.do",true) ;

            // 设置表单传输的编码格式（注意，必须在open方法之后设置）
            req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            // 第三：编写服务器端程序 - Servlet

            // 第四：发送请求 - 调用 send 方法
            // req.send(null) ;

            // 客户端向服务器发送数据，通过send()的参数实现传递
            // 语法：send(参数名１=值&参数名２=值,...,&参数名N=值)
            req.send("name=zing&age=18") ;

            // 第五：设置回调函数 - 绑定 onreadystatechange 事件- 获取服务器响应的结果
            req.onreadystatechange = function() {
                // readyState=4 表示完成请求响应这个过程
                // status=200 表示正常响应
                if (req.readyState==4 && req.status==200) {
                    // DOM 操作 - 获取服务器响应的数据 - 回显在指定的节点中
                    document.getElementById("result").innerHTML = req.responseText ;
                    document.getElementById("result").setAttribute("style","color:red") ;
                }
            }

        }

    </script>
</body>
</html>